<template>
    <div class="edit-pane">
        <div class="edit-title">属性编辑</div>
        <div class="edit-main">
            <div class="edit-item" v-if="style && style.hasOwnProperty('color')">
                <div class="label">颜色选择</div>
                <div class="value">
                    <el-color-picker v-model="style.color" @change="handleStyleChange" />
                </div>
            </div>
            <div class="edit-item" v-if="style && style.hasOwnProperty('text')">
                <div class="label">文字内容</div>
                <div class="value">
                    <input type="text" v-model="style.text" @change="handleStyleChange" />
                </div>
            </div>
            <div class="edit-item" v-if="style && style.hasOwnProperty('font_size')">
                <div class="label">文字大小</div>
                <div class="value">
                    <input type="text" v-model="style.font_size" @change="handleStyleChange" />
                </div>
            </div>
            <div class="edit-item" v-if="style && style.hasOwnProperty('fill')">
                <div class="label">是否填充</div>
                <div class="value">
                    <el-switch v-model="style.fill" @change="handleStyleChange" />
                </div>
            </div>
            <div class="edit-item" v-if="style && style.hasOwnProperty('fillColor') && style.fill">
                <div class="label">填充颜色</div>
                <div class="value">
                    <el-color-picker v-model="style.fillColor" @change="handleStyleChange" />
                </div>
            </div>
            <div class="edit-item" v-if="style && style.hasOwnProperty('fillOpacity') && style.fill">
                <div class="label">填充透明度</div>
                <div class="value">
                    <input type="text" v-model="style.fillOpacity" @change="handleStyleChange" />
                </div>
            </div>
            <div class="edit-item" v-if="style && style.hasOwnProperty('outline')">
                <div class="label">是否边框</div>
                <div class="value">
                    <el-switch v-model="style.outline" @change="handleStyleChange" />
                </div>
            </div>
            <div class="edit-item" v-if="style && style.hasOwnProperty('outlineColor') && style.outline">
                <div class="label">边框颜色</div>
                <div class="value">
                    <el-color-picker v-model="style.outlineColor" @change="handleStyleChange" />
                </div>
            </div>
            <div class="edit-item" v-if="style && style.hasOwnProperty('outlineOpacity') && style.outline">
                <div class="label">边框透明度</div>
                <div class="value">
                    <input type="text" v-model="style.outlineOpacity" @change="handleStyleChange" />
                </div>
            </div>
            <div class="edit-item" v-if="style && style.hasOwnProperty('outlineWidth') && style.outline">
                <div class="label">边框宽度</div>
                <div class="value">
                    <input type="text" v-model="style.outlineWidth" @change="handleStyleChange" />
                </div>
            </div>
            <div class="edit-item" v-if="style && style.hasOwnProperty('pixelSize')">
                <div class="label">点大小</div>
                <div class="value">
                    <input type="text" v-model="style.pixelSize" @change="handleStyleChange" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, watch, defineEmits } from 'vue'
const props = defineProps({
    value: {
        required: true,
        default: () => {
            return {}
        }
    }
})
const emit = defineEmits(['StyleChange'])
let style = ref({})
// 初始化编辑属性
const initEditGraphic = value => {
    style.value = {}
    style.value = JSON.parse(JSON.stringify(value.options.style)) || {}
}
// 监听
watch(
    () => props.value,
    newValue => {
        if (newValue) {
            initEditGraphic(newValue)
        }
    },
    { immediate: true, deep: true }
)
// 样式改变
const handleStyleChange = () => {
    emit('StyleChange', style.value)
}
</script>
<style lang="scss" scoped>
.edit-pane {
    @include box-flex($width: 300px, $height: auto, $direction: column, $justify: flex-start, $align: center);
    .edit-title {
        @include box-flex($width: 100%, $height: 40px, $direction: row, $justify: center, $align: center);
        background: rgba($color: #02172f, $alpha: 50%);
    }
    .edit-main {
        @include box-flex($width: 100%, $height: auto, $direction: column, $justify: center, $align: center);
        .edit-item {
            @include box-flex($width: 100%, $height: auto, $direction: row, $justify: flex-start, $align: center);
            padding: 5px 10px;
            .label {
                width: 30%;
                margin-right: 10px;
            }
            .value {
                input {
                    border: none;
                    outline: none;
                    background: rgba($color: #02172f, $alpha: 50%);
                    padding: 5px 10px;
                    color: #fff;
                }
            }
        }
    }
}
</style>
